<!DOCTYPE html>
<html lang="en" xmlns="http://www.thymeleaf.org">

    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale-1,shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link 
            rel="stylesheet" 
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
            integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
            crossorigin="anonymous">

        <title>Employee Directory</title>
    </head>

    <body class="container">
        <h3>Employee Directory</h3>
        <hr>

        <!-- add a button -->
        <a th:href="@{/employees/showFormForAdd}"
            class="btn btn-primary btn-sm mb-3">
            Add Employee
        </a>

        <table class="table table-bordered table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>
                <tr th:each="tempEmployee : ${employees}">
                    <td th:text="${tempEmployee.firstName}" />
                    <td th:text="${tempEmployee.lastName}" />
                    <td th:text="${tempEmployee.email}" />
                    <td>
                        <!-- add update button/link -->
                        <a th:href="@{/employees/showFormForUpdate(employeeId=${tempEmployee.id})}"
                           class="btn btn-info btn-sm">
                            Update
                        </a>

                        <!-- add "delete" button/link -->
                        <a th:href="@{/employees/delete(employeeId=${tempEmployee.id})}"
                           class="btn btn-danger btn-sm"
                           onclick="if (!(confirm('Are you sure want to delete this employee?'))) return false">
                            Delete
                        </a>

                        <!-- <form action="#" th:action="@{/employees/showFormForUpdate}" method="POST">
                            <input type="hidden" name="employeeId" th:value="${tempEmployee.id}" />
                            <button type="submit" class="btn btn-info btn-sm">Update</button>
                        </form> -->
                    </td>
                </tr>
            </tbody>
        </table>
    </body>

</html>